<template>
  <div class="cats">
    <button
      v-for="c in allCats"
      :key="c"
      class="chip"
      :class="{ active: c === current }"
      @click="setCat(c)"
    >{{ c }}</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const props = defineProps({
  categories: { type: Array, default: () => [] }
})

const router = useRouter()
const route = useRoute()
const current = computed(() => (route.query.cat || '全部').toString())
const allCats = computed(() => ['全部', ...props.categories])

const setCat = (cat) => {
  const q = route.query.q || ''
  const query = { ...route.query }
  if (cat === '全部') {
    delete query.cat
  } else {
    query.cat = cat
  }
  if (q) query.q = q
  router.push({ path: '/', query })
}
</script>

<style scoped>
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 16px;
}
.chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #374151;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}
.chip:hover { border-color: #cfd2d6; box-shadow: var(--shadow-sm); }
.chip:focus { outline: none; border-color: #b7dff1; box-shadow: 0 0 0 3px rgba(0,161,214,0.18); }
.chip:active { transform: scale(0.98); }
.active {
  background: #e6f7ff;
  color: #0077b8;
  border-color: #b3e5ff;
  box-shadow: var(--shadow-sm);
}
</style>